<script>
import bmdForm from '@/components/DmbForm'
import { defaultForm, formBase, tableBase, cellStyle, headerCellStyle, tableFormStyle, formItemStyle } from './config'
import dmbTable from '@/components/LTable/index.vue'
import { mapState } from 'vuex'
  export default {
    name: 'jettison',
    computed: {
      ...mapState({
        company: state => state.custom_dict.company
      }),
      headerCellStyle() {
        return headerCellStyle
      },
      tableFormStyle() {
        return tableFormStyle
      },
      cellStyle() {
        return cellStyle
      },
      formItemStyle() {
        return formItemStyle
      }
    },
    components: { bmdForm, dmbTable },
    data() {
      return {
        propsSearchForm: { ...defaultForm },
        requestConfig: {
          url: '/base/manageJettisons/queryJettisons',
          method: 'get',
          montage: true
        },
        setRequest: {
          url: '/base/manageJettisons/modifyProductInfo',
          method: 'post',
          montage: false
        },
        selectionArr: [] // 多选框内容
      }
    },
    methods: {
      tableBase() {
        return tableBase
      },
      formBase() {
        return formBase
      },
      // 导出
      downLoad() {
        if (this.selectionArr.length > 0) {
          const data = this.selectionArr.map(item => {
            return item.id
          })
          this.download('/base/manageJettisons/exportJettisonsProducts', { ids: data }, `jettison_${new Date().getTime()}.xlsx`)
        } else {
          this.$message.error('请选择条数据导出')
        }
      }
    }
  }
</script>

<template>
  <div>
    <div class="my-3">
      <bmd-form
        ref="form"
        :form-items="formBase()"
        :model-value="propsSearchForm"
        :item-style="formItemStyle"
        @update="(row) => propsSearchForm = row"
      >
        <template v-slot:footer="row" class="flex flex-row-reverse">
          <div class="mb-3 flex flex-row-reverse">
            <div>
              <el-button type="success" @click="$refs.table.getListData()">查询</el-button>
              <el-button type="primary" @click="downLoad">导出</el-button>
            </div>
          </div>
        </template>
      </bmd-form>
    </div>
    <div>
      <dmbTable
        ref="table"
        :prop-list="tableBase()"
        :is-operate="true"
        :show-index-column="true"
        select-column-type="none"
        :props-search-form="propsSearchForm"
        :req-request="requestConfig"
        :set-request="setRequest"
        select-key="id"
        :cell-style="cellStyle"
        :header-cell-style="headerCellStyle"
        :initialize="false"
        :change-search-form="false"
        :show-footer="true"
        :form-item-style="tableFormStyle"
        @selectionChange="(row) => { selectionArr = row }"
      />
    </div>
  </div>
</template>

<style scoped lang="scss">

</style>
